<!doctype html>
<html lang='en' ng-app='app'>
<head>
    <title>Get focused</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
</head>

<body ng-controller="SomeController">
<button ng-click="clickUnfocused()">
    Not focused
</button>
<button ngbk-focus ng-click="clickFocused()">
    I'm very focused!
</button>
<div>{{message.text}}</div>
<script>
    function SomeController($scope) {
        $scope.message = { text: 'nothing clicked yet' };

        $scope.clickUnfocused = function () {
            $scope.message.text = 'unfocused button clicked';
        };

        $scope.clickFocused = function () {
            $scope.message.text = 'focus button clicked';
        };
    }

    var appModule = angular.module('app', []);

    appModule.directive('ngbkFocus', function () {
        return {
            link: function (scope, element, attrs, controller) {
                element[0].focus();
            }
        };
    });
</script>
</body>
</html>
